@use "everything" as *;

.link {
  @include theme-use-var(color, text-primary-color);
}

// The `main` focus styles use `position: fixed` by default so need to update
// the `top` value to be the dialog header's height which defaults to 5.75rem
// with padding
.content {
  @include layout-set-var(header-height, 5.75rem);
}

// An alternative would be to just set the `DialogContent` to have position
// relative and update the focus styles to be absolute positioned with no inset
// .content {
//   position: relative;

//   &::before {
//     inset: 0;
//     position: absolute;
//   }
// }

// If you don't want to use the `main` class name utility for focus styles,
// here's a small example of adding focus styles
// .content {
//   outline: none;
//   position: relative;

//   &::before {
//     @include  pseudo-element;
//     @include  interaction-outline(
//       $color:  interaction-get-var(focus-color)
//     );

//     opacity: 0;
//   }

//   &:focus-visible::before {
//     opacity: 1;
//   }
// }
